{% extends 'course/course_layout.html' %}

<!-- The custom dict template tag -->
{% load custom_tags %}
{% load static %}

{% block head %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.css"
    integrity="sha256-hFAmQt2dGk6G99nu2cEWz8/1JGRnBP/BsGoZwQ7WeLE=" crossorigin="anonymous">
<link rel="stylesheet" href="{% static 'css/default.css' %}">
{% endblock %}

{% block course_app %}
<div class="row">
    <div class="col-2">
        <div class="card border-light">
            <div class="card-header">目录</div>
            <ol class="card-body">
                {% for chapter in chapters %}
                <li>
                    <div class="row align-items-center">
                        <a class="" href="/course/{{ course.id }}/chapter/{{ chapter.id }}/">
                            {{ chapter.name }}
                        </a>
                    </div>
                </li>
                {% endfor %}
            </ol>
        </div>
    </div>
    <div class="col">
        {{ chapter_text.content | markdown | safe }}
    </div>
</div>
{% endblock %}


{% block script %}
<script src="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.js"
    integrity="sha256-+EWBEj6A8lxFvckkChitv8/RcHK/PcWvQV+D7PDflC8=" crossorigin="anonymous"></script>
<script>
    (function () {
        'use strict';
        var katexMath = (function () {
            var maths = document.querySelectorAll('.arithmatex'),
                tex;

            for (var i = 0; i < maths.length; i++) {
                tex = maths[i].textContent || maths[i].innerText;
                if (tex.startsWith('\\(') && tex.endsWith('\\)')) {
                    katex.render(tex.slice(2, -2), maths[i], { 'displayMode': false });
                } else if (tex.startsWith('\\[') && tex.endsWith('\\]')) {
                    katex.render(tex.slice(2, -2), maths[i], { 'displayMode': true });
                }
            }
        });

        (function () {
            var onReady = function onReady(fn) {
                if (document.addEventListener) {
                    document.addEventListener("DOMContentLoaded", fn);
                } else {
                    document.attachEvent("onreadystatechange", function () {
                        if (document.readyState === "interactive") {
                            fn();
                        }
                    });
                }
            };

            onReady(function () {
                if (typeof katex !== "undefined") {
                    katexMath();
                }
            });
        })();

    }());
</script>
<script>
    $(function () {
        $("table").addClass("table table-striped table-bordered");
    });
</script>
{% endblock %}